<template>
	<view class="contain">
		<view class="line1"></view>
		<!-- user msg -->
		<view class="user_msg">
			<view class="userInfor">
				<image v-if="detail.WxUserHeadImg" :src="detail.WxUserHeadImg" ></image>
				<image v-else :src="detail.CoverImg" ></image>
				<view class="userName">
					<p class="texthide">{{detail.WxUserName || '--'}}</p>
					<span>{{detail.AddTime}}</span>
				</view>
			</view>
			<view v-if="statue==false" class="collect" @click="getEva()">
				+ 收藏
			</view>
			<view v-else class="collect" @click="getEvaNo()">
				- 已收藏
			</view>
		</view>
		<view class="artTitle">{{detail.Title}}</view>
		<view class="artText">{{detail.Abstract}}</view>
		<view class="artImg" v-for="(item,index) in detail.AppreciationImgList" :key="index">
			<image :src="item" mode="widthFix"></image>
		</view>
		<view class="line"></view>
		<view  class="comment">
			<p class="pstyle">评论 （{{this.articList.length}}）</p>
			<p class="pstyle1">{{detail.UpvoteCount}} 赞</p>
			<p class="pstyle2">  |  </p>
			<p class="pstyle1">{{detail.CollectionCount}} 收藏</p>
			<scroll-view v-if="this.articList.length > 0" class="commentList" scroll-y="true">
				<view class="commentItem" v-for="item in articList" :key="item.Id">
					<view class="userImg">
						<image :src="item.HeadImg" mode="widthFix"></image>
					</view>
					<view class="textContent">
						<p>{{item.UserName}}</p>
						<p class="paddtime">{{item.AddTime}}</p>
						<text class="tcContent">{{item.ContentText}}</text>
					</view>
				</view>
			</scroll-view>
			<view v-else class="commentImg">
				<view class="commentImg">
					<image src="../../static/img/null.png" mode="widthFix"></image>
					还没有评论哦
				</view>
			</view>
			<view class="line2"></view>
		</view>
		<view class="bottomSend">
			<view class="textView">
				<image src="../../static/images/penceil.png" mode="widthFix"></image>
				<input @confirm="activeBtn" v-model="myText" placeholder="写评论..." type="text">
			</view>
			<image class="image1" src="../../static/images/sendOp2.png" mode="widthFix" @click="sendBtn"></image>
			<image class="image2" :src="isGiveLike == true ? '../../static/images/GiveLike1.png' : '../../static/images/GiveLike.png'" mode="widthFix" @click="giveLike"></image>
		</view>
	</view>
</template>

<script>
	import {addArticleComment,getArticleCommentList, getArticleDetail,getAddCollection,getCheckCollection,getCancelCollection,AddUpvote,CheckUpVote,CancelUpvote } from '@/api/homePage.js'
	export default{
		data(){
			return{
				isGiveLike:'',
				forumMsg:'',
				detail:'',
				statue:'',
				articList:[],
				myText:''
			}
		},
		onLoad(option) {
			this.forumMsg=JSON.parse(option.forumMsg);
			console.log('333',option)
			this.getDetail()
			this.getCheck()
			this.getIsGiveLike()
		},
		methods:{
			async activeBtn(){
			   if(!this.myText){
			   	uni.showToast({
			   		title: '请填写内容',
			   		icon: 'none',
			   		duration: 2000
			   	});
			   	return;
			   }
			   try{
			   	uni.showLoading({
			   		title:'操作中...'
			   	})
			   	const { Data } = await addArticleComment({
			   		ArticleId:this.detail.Id,
			   		CommentText:this.myText,
			   		ArticleCommentId:0
			   	});
			   	this.getDetail()
			   	this.myText=''
			   	uni.hideLoading()
				uni.showToast({
					title: '评论成功',
					icon: 'none',
					duration: 2000
				});
			   }catch(e){
			   	
			   }
			},
			//评论
			async sendBtn(){
				if(!this.myText){
					uni.showToast({
						title: '请填写内容',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				try{
					uni.showLoading({
						title:'操作中...'
					})
					const { Data } = await addArticleComment({
						ArticleId:this.detail.Id,
						CommentText:this.myText,
						ArticleCommentId:0
					});
					this.getDetail()
					this.myText=''
					uni.hideLoading()
					uni.showToast({
						title: '评论成功',
						icon: 'none',
						duration: 2000
					});
				}catch(e){
					
				}
			},
			//点赞
			async giveLike(){
				if(this.isGiveLike){
					try{
						uni.showLoading({
							title:'操作中...'
						})
						const { Data } = await CancelUpvote({
							Id:this.detail.Id,
						});
						
						this.getDetail()
						this.getIsGiveLike()
						uni.hideLoading()
					}catch(e){
						
					}
				}else{
					try{
						uni.showLoading({
							title:'操作中...'
						})
						const { Data } = await AddUpvote({
							Id:this.detail.Id,
						});
						
						this.getDetail()
						this.getIsGiveLike()
						uni.hideLoading()
					}catch(e){
						
					}
				}
		
			},
			async getEva(){
				try{
					uni.showLoading({
						title:'操作中...'
					})
					const { Data } = await getAddCollection({
						Id:this.forumMsg.Id,
						CollectionType:2
					});
					
					this.getDetail()
					uni.hideLoading()
					this.getCheck()
				}catch(e){
					
				}
			},
			async getEvaNo(){
				try{
					uni.showLoading({
						title:'操作中...'
					})
					const { Data } = await getCancelCollection({
						Id:this.forumMsg.Id,
						CollectionType:2
					});
					
					this.getDetail()
					uni.hideLoading()
					this.getCheck()
				}catch(e){
					
				}
			},
			async getDetail(){
				try{
					uni.showLoading({
						title:'加载中...'
					})
					const { Data } = await getArticleDetail({
						Id:this.forumMsg.Id
					});
					this.detail = Data
					this.getList()
					uni.hideLoading()
				
				}catch(e){
					
				}
			},
			async getList(){
				try{
					const { Data } = await getArticleCommentList({
						ArticleId:this.detail.Id,
						Index:1,
						Size:10
					});
					this.articList = Data
				}catch(e){
					
				}
			},
			async getCheck(){
				try{
					uni.showLoading({
						title:'加载中...'
					})
					const { Data } = await getCheckCollection({
						Id:this.forumMsg.Id,
						CollectionType:2
					});
					
					this.statue=Data
					uni.hideLoading()
				}catch(e){
					
				}
			},
			//验证是否点赞
			async getIsGiveLike(){
				try{
					uni.showLoading({
						title:'加载中...'
					})
					const { Data } = await CheckUpVote({
						Id:this.forumMsg.Id,
					});
					this.isGiveLike = Data
					uni.hideLoading()
				}catch(e){
					
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line{
		margin-top: 10px;
		width: 100%;
		height: 15rpx;
		background-color: #EDEDED;
	}
	.line1{
		width: 100%;
		height: 15rpx;
		background-color: #EDEDED;
	}
	.line2{
		width: 100%;
		height: 100rpx;
	}
	.contain{
		width: 100vw;
		min-height: 100vh;
		background-color: #FFFFFF;
		.bottomSend{
			position: fixed;
			width: 100%;
			height: 100rpx;
			bottom: 0;
			//box-shadow: 0px -5px 5px #d0d0d0;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			.textView{
				width: 65%;
				background-color: #E9E9E9;
				height: 60%;
				display: flex;
				align-items: center;
				border-radius: 30rpx;
				margin-left: 5%;
				image{
					width: 28rpx;
					margin: 0 30rpx;
				}
			}
			image{
				margin-left: 5%;
			}
			.image1{
				height: 52%;
				width: 7%;
			}
			.image2{
				height: 50%;
				width: 6%;
				margin-bottom: 6rpx;
			}
		}
		.user_msg{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #F8F8F8;
			.userInfor{
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 80rpx;
				}
				.userName{
					margin-left: 20rpx;
					p{
						font-size: 32rpx;
						color: #333333;
					}
					span{
						font-size: 24rpx;
						color: #888888;
					}
				}
			}
			.collect{
				width: 20%;
				height: 50rpx;
				margin-right: 40rpx;
				border-radius: 35rpx;
				border: rgb(220,120,56) 2rpx solid;
				text-align: center;
				line-height: 50rpx;
				font-size: 24rpx;
				color: rgb(220,120,56);
			}
		}
		.artTitle{
			padding: 30rpx 5% 0 5%;
			font-size: 40rpx;
			font-weight: bold;
			background-color: #FFFFFF;
		}
		.artText{
			padding: 30rpx 5% 0 5%;
			font-size: 32rpx;
			background-color: #FFFFFF;
		}
		.artImg{
			padding-left: 5%;
			padding-right: 5%;
			padding-top: 20rpx;
			background-color: #FFFFFF;
			image{
				width: 100%;
			}
		}
	
	    .mainImg{
			width: 90%;
			margin-left: 5%;
			margin-top: 20rpx;
			image{
				width: 100%;
			}
		}
		.mainContent{
			width: 90%;
			margin-left: 2%;
			padding: 3%;
		}
		
		.comment{
			margin-bottom: 200rpx;
			margin-top: 30rpx;
			width: 90%;
			font-weight: bold;
			margin-left: 5%;
			.pstyle{
				display: inline;
				color: #111111;
				font-size: 40rpx;
			}
			.pstyle1{
				display: inline;
				color: #C0C0C0;
				font-weight: normal;
				font-size: 25rpx;
				float: right;
				margin-top: 10rpx;
			}
			.pstyle2{
				display: inline;
				color: #EEEEEE;
				font-weight: normal;
				font-size: 25rpx;
				float: right;
				margin: 10rpx 20rpx 0;
			}
			.commentImg{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: gray;
				font-size: 30rpx;
				image{
					width: 100%;
				}
			}
			.commentList{
				width: 100%;
				overflow: hidden;
				margin-top: 30rpx;
				font-weight: normal;
				.commentItem{
					display: flex;
					margin-top: 10rpx;
					.userImg{
						image{
							width: 80rpx;
							height: 80rpx;
							border-radius: 80rpx;
						}
					}
					.textContent{
						margin-top: 10rpx;
						margin-left: 30rpx;
						p{
							font-size: 24rpx;
							color: #111111;
						}
						.paddtime{
							font-size: 24rpx;
							color: #888888;
						}
						
						.tcContent{
							font-size: 28rpx;
							color: #222222;
						}
					}
				}
			}
		}
	}
	.texthide{
		width:280rpx; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	}
</style>